<script setup lang="ts">
import ChooseModeHeader from "@renderer/view/homePage/components/ChooseModeHeader.vue";
import PatientSearchContainer from "@renderer/view/homePage/components/PatientSearchContainer.vue";
import ContentTabContainer from "@renderer/view/homePage/components/ContentTabContainer.vue";
import { provide, ref } from "vue";
import Setting from "@renderer/view/homePage/components/Setting.vue";
const folderLoadingVisible =  ref(false)
const showLeftDrawer = ref(true);
provide('seriesListOp',{
  folderLoadingVisible: folderLoadingVisible,
})

</script>

<template>
  <div class="w-full h-full flex position-relative ">
    <v-expand-x-transition>
      <div v-show="showLeftDrawer"
           class="w-[250px] flex flex-column flex-shrink-0 position-relative">
        <choose-mode-header/>
        <patient-search-container />
        <div class="mt-auto h-[50px]">
            <setting/>
        </div>
        <v-btn icon="mdi-arrow-expand-left"
               variant="text"
               color="active"
               @click="showLeftDrawer = !showLeftDrawer"
               class="position-absolute right-0 top-[50%] "></v-btn>
      </div>

    </v-expand-x-transition>
    <v-btn v-show="!showLeftDrawer" variant="text"  icon="mdi-arrow-expand-right"
           @click.prevent="showLeftDrawer = !showLeftDrawer"
           color="active"
           class="position-absolute left-0 top-[50%] z-[1000]">
    </v-btn>
    <div class="flex-1 bg-[#f5f5f4]  flex flex-column overflow-hidden ">
      <div
        class="w-full overflow-x-auto h-[40px] !mb-[5px] flex-shrink-0">
        <content-tab-container class="w-full "/>
      </div>

      <router-view v-slot="{ Component }" >
        <keep-alive >
          <component :is="Component" :key="$route.fullPath" />
        </keep-alive>
      </router-view>

    </div>
  </div>
</template>

<style scoped>

</style>
